import React, { Component } from 'react'
import {Link, withRouter} from 'react-router-dom'
import {Menu} from 'antd'
import {connect} from 'react-redux'
import {
    HomeOutlined,
    ShoppingCartOutlined,
    UnorderedListOutlined,
    ToolOutlined,
    UserOutlined,
    TeamOutlined,
    AreaChartOutlined,
    LineChartOutlined,
    BarChartOutlined,
    PieChartOutlined,
    EllipsisOutlined
  } from '@ant-design/icons'

import menuList from '../../config/menuConfig'
import {setHeaderTitle} from '../../redux/actions'
import logo from './images/localDocker.jpg'
import './index.css'

const { SubMenu } = Menu
// 左侧导航的组件
class LeftNav extends Component {

    // 匹配图标
    choseIcon = (icon) => {
        switch(icon) {
            case 'HomeOutlined':
                return <HomeOutlined />
            case 'ShoppingCartOutlined':
                return <ShoppingCartOutlined />
            case 'UnorderedListOutlined':
                return <UnorderedListOutlined />
            case 'ToolOutlined':
                return <ToolOutlined />
            case 'UserOutlined':
                return <UserOutlined />
            case 'TeamOutlined':
                return <TeamOutlined />
            case 'AreaChartOutlined':
                return <AreaChartOutlined />
            case 'BarChartOutlined':
                return <BarChartOutlined />
            case 'LineChartOutlined':
                return <LineChartOutlined />
            case 'PieChartOutlined':
                return <PieChartOutlined />
            default:
                return <EllipsisOutlined />
       } 
    }

    // 页面中展示项目
    showMenuItem = (menuList) => {
        return menuList.map(
            item => {
                if (!item.children) {
                    return (
                    <Menu.Item key={item.key} icon={this.choseIcon(item.icon)}>
                        <Link to={item.key} onClick={() => this.props.setHeaderTitle(item.title)}>{item.title}</Link>
                    </Menu.Item>
                    )
                } else {
                    const path = this.props.location.pathname
                    const cItem = item.children.find(
                        cItem => cItem.key === path
                    )
                    if (cItem) {
                        this.openKey = item.key
                    }
                    return (
                    <SubMenu key={item.key} icon={this.choseIcon(item.icon)} title={item.title}>
                        {this.showMenuItem(item.children)}
                    </SubMenu>
                    )
                }
            }
        )
    }

    componentWillMount () {
        this.menuNodes = this.showMenuItem(menuList)
    }
    
    render() {
        // 当前路由路径
        const path = this.props.location.pathname
        return (
            <div className="left-nav">
                <Link to='/' className="left-nav-header">
                    <img src={logo} style={{height:50,width:70}} alt="logo"/>
                </Link>
                <Menu defaultSelectedKeys={['0']} defaultOpenKeys={['sub1']} mode="inline" theme="dark" selectedKeys={[path]} defaultOpenKeys={[this.openKey]}>
                    {this.menuNodes}
                </Menu>
            </div>
        )
    }
}

// 高阶组件，返回一个新的组件
export default connect(
    state => ({}),
    {setHeaderTitle}
)(withRouter(LeftNav))
